<template>
  <div class="w-[100%] h-[100%]">

    <div>
      <ContentWrap>
        <SearchBox :queryForm="searchList" :showExpland="true" @query="handleSearchQuery" :show-export="false"/>
      </ContentWrap>
    </div>

    <div class="mt-[30px]">
      <QueryTable
        :list="dataList"
        :total="total"
        :btns="tableBtnList"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="false"
        :show-section="false"
      >
        <template #status="{row}">
          <div :style="`color:${  billStatus.find(at => {
                return row.status == at.value
              })?.color }`">
            {{
              billStatus.find(at => {
                return row.status == at.value
              })?.label
            }}
          </div>
        </template>

        <template #duration="{row}">
          <div>{{ row.duration || 0 }}月</div>
        </template>

        <template #business="{row}">
          <div>{{
              tradeType.find(at => {
                return at.value == row.business
              })?.label
            }}</div>
        </template>


        <template #price="{row}">
          <div>{{ Math.round(row.price)/100 }}</div>
        </template>
      </QueryTable>
    </div>
  </div>
</template>
<script setup lang="ts">
import Icon from "@/components/Icon/src/Icon.vue"
import QueryTable from "@/components/TableData/index.vue"
import ImagePreview from "@/components/ImagePreview/index.vue"
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";

import type {PurchaseAdvice} from "@/api/purchase/advice/type";
import {throttle, confirmPromote, billStatus} from "@/utils";

import {FeeApi} from "@/api/fee";

import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
const tradeType =  getStrDictOptions(DICT_TYPE.BUSINESS_TYPE)

console.log(tradeType,"trade")

const searchList: TradeOrderQueryVO[] = [
  {
    label: '订单编号',
    code: 'no',
    type: 'input'
  },

  {
    label: '下单日期',
    code: 'createTime',
    type: 'dateRange'
  },
  {
    label: '状态',
    code: 'status',
    type: 'select',
    options: billStatus
  },
  {
    label: '业务',
    code: 'business',
    type: 'select',
    options:tradeType
  },
]

const initQueryParams = {
  pageNo: 1, pageSize: 10
}

const tableBtnList = ref([
  {
    color: '#3721FF',
    code: 'edit',
    name: '编辑'
  },
  {
    color: '#FF4E00',
    code: 'delItem',
    name: '删除'
  }
]);


const th = ref([
  {
    name: '订单编号',
    code: 'no',
    type: 'numberRanger',
    search: true
  },
  {
    name: '手机号',
    code: 'phone',
    type: 'date',
    search: true
  },
  {
    name: '业务',
    code: 'business',
    search: false
  },
  {
    name: '购买内容',
    code: 'body',
    search: false
  },
  {
    name: '席位',
    code: 'seat',
    search: false
  },
  {
    name: '购买时长',
    code: 'duration',
    search: false
  },
  {
    name: '订单金额',
    code: 'price',
    search: false
  },
  {
    name: '下单时间',
    code: 'createTime',
    search: false,
    date:true
  },
  {
    name: '订单状态',
    code: 'status',
    search: false
  },
]);
const dataList = ref<PurchaseAdvice[]>([]);
const ids = ref<Array<string | number>>([]);
const total = ref(0);

const initRow = {
  cover: null,
  sku: null,
  spec: null,
  name: null,
  productId: null,
  advice: null,
  occupy: null,
  stock: null,
  inTransit: null,
  noAuditInTransit: null,
}

const selectedRow = ref<PurchaseAdvice>({...initRow})

const isShowDialog = ref(false)


const queryParams = ref({
  ...initQueryParams
})

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  queryParams.value={
    ...initQueryParams,
    ...val
  }
  queryList();
}

const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  pagination(page) {
    queryList();
  },
  add({data}) {
    selectedRow.value = {};
    isShowDialog.value = true
  },
  edit({data}) {
    selectedRow.value = data.row;
    isShowDialog.value = true
  },
  delItem: throttle(async ({data: {row}}) => {
    await confirmPromote({
      content: "确认删除吗？"
    })
  }, 1000)
}

const queryList = async () => {
  let res = await FeeApi.getBillList(queryParams.value);
  dataList.value = res.list;
  total.value = res.total;
}

onMounted(() => {
  queryList();
})
</script>
<style lang="scss" scoped>

</style>
